<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

	</head>
	<body>
		
		<div id="app">
		姓名：<input type="text" v-model.lazy="firstName"/><br />
		名称：<input type="text" v-model.lazy="lastName" /><br />
		昵称：<input type="text" v-model.lazy="niName" /><br />
		<!-- 调用upper过滤器 -->
		全名：{{fullName}}
		
		<hr />
		<!-- 过滤器 -->
		<br />
		用户名：<input type="text" v-model="username" />
		<!-- 只显示最后一个过滤器 -->
		{{username|lower|upper}}
		
		</div>
		<script src="../js/vue.js"></script>
		<script>
			Vue.filter("upper",function(value){
				console.log(value);
				return value.toUpperCase()
				})
			//=>前面、后面没有空格
			Vue.filter("lower",(value)=>{
				console.log(value)
				return value.toLowerCase()
			})
			
			const app=new Vue({
				el:"#app",
				data:{
				firstName:'',
				lastName:'',
				niName:'',
				fullName:'',
				username:''
				},
				methods:{
				
				},
				//监听器对象
				watch:{
				firstName(value){
					//console.log("获取数据"+value)
					this.fullName=value+this.lastName+this.niName
				},
				lastName(value){
					this.fullName=this.firstName+value+this.niName
				},
				niName(value){
					this.fullName=this.firstName+value+this.niName
				}
				}
			})
		</script>
	</body>
</html>
